<template>
  <section class="upload-image">
    <el-upload
      ref="upload"
      :headers="upload.headers"
      :action="upload.action"
      drag
      accept=".jpg, .jpeg, .png, .JPG, .JPEG, .svg"
      :show-file-list="false"
      :disabled="disabled"
      :before-upload="beforeupload"
      :on-success="uploadsuccess"
      :on-error="uploaderror"
    >
      <div class="upload-image-inner" :class="{ 'disable': disabled, 'error': error_}">
        <div v-if="value" class="inner-value">
          <el-image :src="value">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
          <span class="remove">
            <i class="el-icon-delete" @click.stop="handleRemove"></i>
          </span>
        </div>

        <i v-else class="el-icon-plus inner-icon" />
      </div>
    </el-upload>
  </section>
</template>
<script>
import mixins from './../mixins'
import { getToken } from '@/utils/auth'
export default {
  name: 'VUploadImage',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      upload: {
        headers: {
          token: getToken()
        },
        action: `${process.env.VUE_APP_BASE_API}files/upload`,
        result: '',
        loading: false
      },
      result: ''
    }
  },
  computed: {
    maxSize () {
      return this.option.maxSize || 5
    }
  },
  methods: {
    beforeupload (file) {
      const _this = this
      const { maxSize } = this
      const size = file.size / 1024 / 1024 <= maxSize
      if (!size) {
        this.$confirm(`文件大小超过${(maxSize)}MB限制`, '提示', {
          confirmButtonText: '重新上传',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          _this.$refs.upload.$children[0].handleClick()
        })
      }
      if (size) {
        this.upload.loading = true
      }
      return size
    },

    uploadsuccess ({ code, data, msg = '上传失败' }) {
      this.upload.loading = false
      if (code == 0) {
        this.upload.result = 'done'
        this.value = data
        this.handleChange()
      } else {
        this.upload.result = 'fail'
        this.$message.error(msg)
        this.$refs.upload.clearFiles()
      }
    },

    uploaderror () {
      this.result = 'fail'
    },

    getValue () {
      return this.value
    },

    setValue (v) {
      this.value = v
      this.setCheck()
    },

    setCheck () {
      const { required, value } = this
      const { result, loading } = this.upload
      let error = false, error_message = ''
      if (required) {
        if (!value) {
          error = true
          if (!result) {
            if (this.$refs.upload.uploadFiles.length <= 0) {
              error_message = '必填选项不能为空'
            } else {
              error = false
            }
          } else if (result === 'fail') {
            error_message = '上传失败'
          } else if (loading) {
            error_message = '上传中'
          }
        } else {
          error = false
        }
      } else {
        error = false
      }
      this.error_ = error
      this.error_message_ = error_message
      this.fieldCheck()
    },

    handleRemove () {
      this.value = ''
      this.handleChange()
    },

    handleChange () {
      this.dispatch_event('filed-value-change', this.value)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/center.scss';
.upload-image {
  /deep/ {
    .el-upload {
      .el-upload-dragger {
        border: none;
        width: auto;
        height: auto;
        border-radius: 4px;
      }
    }
  }

  .upload-image-inner {
    border-radius: 4px;
    border: 1px solid $f4;
    background-color: $f9;
    cursor: pointer;
    .el-image {
      width: 100px;
      height: 100px;
      border-radius: 4px;
      display: block;
    }
    .inner-value {
      position: relative;
      .remove {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 10;
        cursor: default;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        transition: opacity 0.3s;
        @include center();
        > i {
          cursor: pointer;
        }
      }
    }
    .inner-icon {
      display: inline-block;
      font-size: 28px;
      color: $f4;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      border-radius: 4px;
    }
    &:hover {
      border-color: $a1;
      .remove {
        opacity: 1;
      }
      .inner-icon {
        color: $a1;
      }
    }
    &.disable {
      cursor: not-allowed;
      background-color: $f7;
      &:hover {
        border-color: $f4;
        .inner-icon {
          color: $f4;
        }
      }
    }
    &.error {
      border-color: $a3;
      &:hover {
        border-color: $a3;
        .inner-icon {
          color: $f4;
        }
      }
    }
  }
}
</style>
